<template>
  <div class="tabsContent">
    <div class="tableCon">
      <!-- <px-form ref="formRef" class="custom-form-ui inspection-form" :model="queryParams" label-position="right" label-width="120px">
        <px-form-item label="检测结果">
          <px-select v-model="queryParams.detectResult" clearable filterable placeholder="请选择检测结果">
            <px-option v-for="item in detectResultData" :key="item.value" :label="item.label" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="检测机构">
          <px-select v-model="queryParams.detectOrganization" clearable filterable placeholder="请选择检测机构">
            <px-option v-for="item in organizationArr" :key="item.itemValue" :label="item.itemName" :value="item.itemValue" />
          </px-select>
        </px-form-item>
        <px-form-item label="负责人">
          <px-select-v2 v-model="queryParams.responsiblePersonId" filterable clearable :options="peopleList" placeholder="请选择负责人" />
        </px-form-item>
        <px-form-item label="报告日期" style="width: 430px">
          <px-date-picker
            v-model="dateRange"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
          />
        </px-form-item>
        <px-button type="primary" @click="queryTable">查询</px-button>
        <px-button @click="resetTable">重置</px-button>
      </px-form> -->
      <px-descriptions title="" :column="4" border style="margin-bottom: 16px">
        <px-descriptions-item label="单据编号" :span="24" label-align="center" align="left" width="200px">EM978564152</px-descriptions-item>
        <px-descriptions-item label="公司" label-align="center" align="left" width="200px">
          <px-button type="primary" link>STIC</px-button>
        </px-descriptions-item>
        <px-descriptions-item label="周期性（天数）" label-align="center" align="left" width="200px">30</px-descriptions-item>
        <px-descriptions-item label="到期日" label-align="center" align="left" width="200px">2029-01-01</px-descriptions-item>
        <px-descriptions-item label="提醒人" label-align="center" align="left" width="200px">wangning</px-descriptions-item>
        <px-descriptions-item label="是否批号" label-align="center" align="left" width="200px">
          <px-radio-group v-model="radio">
            <px-radio label="1">是</px-radio>
            <px-radio label="0">否</px-radio>
          </px-radio-group>
        </px-descriptions-item>
      </px-descriptions>
      <px-scrollbar>
        <px-table
          :data="tableData"
          class="inspection-table"
          size="small"
          height="calc(100vh -400px)"
          border
          :header-cell-class-name="tableHeaderColor"
          @selection-change="selectionChange"
        >
          <px-table-column type="selection" width="40" align="center" />
          <px-table-column label="序号" width="60" align="center" fixed="left">
            <template #default="{ $index }">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
            </template>
          </px-table-column>
          <px-table-column prop="testPerson" label="测试人员" align="center" />
          <px-table-column prop="testDate" label="测试日期" align="center" />
          <px-table-column prop="testCompony" label="部门" align="center" />
          <px-table-column prop="submitDate" label="提交日期" align="center" />
          <px-table-column prop="area" label="区域" align="center" />
          <px-table-column prop="leval" label="等级" min-width="180" align="center" />
          <px-table-column prop="position" label="位置" align="center" />
          <px-table-column prop="jie01" label="洁净度-0.1" align="center" />
          <px-table-column prop="jie02" label="洁净度-0.2" align="center" />
          <px-table-column prop="jie03" label="洁净度-0.3" align="center" />
          <px-table-column prop="jie05" label="洁净度-0.5" align="center" />
          <px-table-column prop="temp" label="湿度" align="center" />
          <px-table-column prop="shidu" label="温度" align="center" />
          <px-table-column prop="wind" label="风速" align="center" />
          <px-table-column prop="testPerson" label="洁净度-0.1" align="center">
            <px-table-column prop="usl01" label="USL" align="center" />
            <px-table-column prop="ucl01" label="UCL" align="center" />
          </px-table-column>
          <px-table-column prop="testPerson" label="洁净度-0.2" align="center">
            <px-table-column prop="usl02" label="USL" align="center" />
            <px-table-column prop="ucl02" label="UCL" align="center" />
          </px-table-column>
          <px-table-column prop="testPerson" label="洁净度-0.3" align="center">
            <px-table-column prop="usl03" label="USL" align="center" />
            <px-table-column prop="ucl03" label="UCL" align="center" />
          </px-table-column>
          <px-table-column prop="testPerson" label="洁净度-0.5" align="center">
            <px-table-column prop="usl04" label="USL" align="center" />
            <px-table-column prop="ucl04" label="UCL" align="center" />
          </px-table-column>
          <px-table-column prop="testPerson" label="温度" align="center">
            <px-table-column prop="tempT" label="TARGET" align="center" />
            <px-table-column prop="usltemp" label="USL" align="center" />
            <px-table-column prop="lsltemp" label="LSL" align="center" />
            <px-table-column prop="ucltemp" label="UCL" align="center" />
            <px-table-column prop="lcltemp" label="LCL" align="center" />
          </px-table-column>
          <px-table-column prop="testPerson" label="湿度" align="center">
            <px-table-column prop="shiduT" label="TARGET" align="center" />
            <px-table-column prop="uslshidu" label="USL" align="center" />
            <px-table-column prop="lslshidu" label="LSL" align="center" />
            <px-table-column prop="uclshidu" label="UCL" align="center" />
            <px-table-column prop="lclshidu" label="LCL" align="center" />
          </px-table-column>
          <px-table-column prop="testPerson" label="风速" align="center">
            <px-table-column prop="windT" label="TARGET" align="center" />
            <px-table-column prop="uslwind" label="USL" align="center" />
            <px-table-column prop="lslwind" label="LSL" align="center" />
            <px-table-column prop="uclwind" label="UCL" align="center" />
            <px-table-column prop="lclwind" label="LCL" align="center" />
          </px-table-column>
        </px-table>
      </px-scrollbar>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="inspection-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted, reactive, toRefs, nextTick } from "vue";

const { proxy }: any = getCurrentInstance();

const radio = ref("0");
const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0,
  tableData: [
    {
      testPerson: "gfa",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 21236.0,
      ucl01: 12.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 213.0,
      ucl03: 112.0,
      usl04: 236127.0,
      ucl04: 2366.0,
      tempT: 12.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 21.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 21.0,
      lslwind: 23.0,
      uclwind: 2213.0,
      lclwind: 22.0
    },
    {
      testPerson: "asa",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 112.0,
      usl02: 123.0,
      ucl02: 67.0,
      usl03: 23.0,
      ucl03: 55.0,
      usl04: 8567.0,
      ucl04: 34.0,
      tempT: 345.0,
      usltemp: 12.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "llg",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 345.0,
      usl02: 21.0,
      ucl02: 123.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 454.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 33.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "plf",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "CPD",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 111.0,
      ucl02: 2333.0,
      usl03: 23.0,
      ucl03: 111.0,
      usl04: 2233.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 545.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    },
    {
      testPerson: "hlh",
      testDate: "2024-06-15",
      testCompony: "Q部门",
      submitDate: "2024-08-16",
      area: "WET",
      leval: "ISO Cawl PS209E Class100",
      position: "DIFF-4",
      jie01: 24.0,
      jie02: 123.0,
      jie03: 29.0,
      jie05: 64.0,
      temp: "25℃",
      shidu: "209.66",
      wind: "66m/s",
      usl01: 236.0,
      ucl01: 2333.0,
      usl02: 2333.0,
      ucl02: 2333.0,
      usl03: 2367.0,
      ucl03: 2367.0,
      usl04: 2367.0,
      ucl04: 2366.0,
      tempT: 11166.0,
      usltemp: 766.0,
      lsltemp: 36.0,
      ucltemp: 36.0,
      lcltemp: 676.0,
      shiduT: 56.0,
      uslshidu: 336.0,
      lslshidu: 316.0,
      uclshidu: 16.0,
      lclshidu: 36.0,
      windT: 56.0,
      uslwind: 23.0,
      lslwind: 23.0,
      uclwind: 23.0,
      lclwind: 23.0
    }
  ],
  selectIds: []
});

const { selectIds, queryParams, total, tableData } = toRefs(state);

const dateRange = ref<any>([]);
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)];

const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
  // if (rowIndex === 1) {
  //   return "bg1";
  // }
  // if (rowIndex === 3 || rowIndex === 2) {
  //   return "bg2";
  // }
  return "bg0";
};

// 表格多选框选中
const selectionChange = (val: any) => {
  selectIds.value = [];
  // val.forEach((item: any) => {
  //   if (item.checklistId) {
  //     selectIds.value.push(item.checklistId);
  //   }
  // });
};

// 查询
const queryTable = async () => {
  // const params = proxy.addDateRange(queryParams.value, dateRange.value, "reportStart", "reportEnd");
  // const data = await waterTestList(params);
  // let dataList = data?.data ? data.data : [];
  // dataList.map((item: any) => {
  //   if (item.testResult && item.testResult.length > 0) {
  //     item.testResult.forEach((el: any) => {
  //       item[el.key] = el;
  //     });
  //   }
  //   return item;
  // });
  // tableData.value = [
  //   {
  //     testPerson: "123"
  //   }
  // ];
  // total.value = data?.total;
};

// 重置筛选条件
const resetTable = async () => {
  dateRange.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  };
  queryTable();
};

const handleDownload = (row: any) => {
  // 下载文件
  console.log(row.originalName);
  const url = row.fileUrl;
  const link = document.createElement("a");
  link.href = url;
  link.setAttribute("download", row.originalName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const dialogVisible = ref(false);
const submitHandler = async () => {
  const message = "上传成功";
  PxMessage.success(message);
  await queryTable();
};

/** 导出按钮操作 */
// function handleExport() {
// const dictIds = [];
// dictIds.push(...ids.value);
//console.log(dictIds);
// liquidExport({ ids: dictIds }).then((response: any) => {
//   PxMessage({
//     message: "导出成功",
//     type: "success"
//   });
// });
// downloadParams.value.ids = selectIds.value;
// const params = { ids: dictIds };
// proxy.download("post", "/operation/api/v1/water/hazardWasteIn/export", params, "水质检测-CW检测报告.xlsx");
// }

const init = async () => {
  queryTable();
};

onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
.tabsContent {
  background: white;

  .my-label {
    background: var(--px-color-success-light-9);
  }

  .my-content {
    background: var(--px-color-danger-light-9);
  }

  .tableCon {
    padding: 16px 24px;

    :deep(.px-table__header) {
      thead {
        .bg0 {
          background-color: #e7eef8 !important;
        }

        .bg1 {
          background-color: #fef5e6 !important;
        }

        .bg2 {
          background-color: #e8f8f3 !important;
        }
      }
    }
  }

  .bgDom {
    height: 16px;
    background-color: #f0f2f5;
  }

  :deep(.px-table .px-table__header-wrapper th) {
    background-color: #e7eef8;
  }
}
</style>
